<template>
  <el-dialog title="费用明细" :visible.sync="dialogVisible" append-to-body>
    <template v-if="type==2">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="托管单价">{{ billInfo. escrowUnitPrice}}元/天</el-descriptions-item>
        <el-descriptions-item label="用车天数">{{ billInfo.usageDays }}</el-descriptions-item>
        <el-descriptions-item label="同行名称">{{billInfo.userName}}</el-descriptions-item>
        <el-descriptions-item label="用车时间">{{billInfo.startTime}}至{{billInfo.endTime}}</el-descriptions-item>
        <el-descriptions-item label="托管费用">{{billInfo.custodyFees}}元</el-descriptions-item>
        <el-descriptions-item label="账单时间">{{billInfo.billingTime}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{billInfo.payWay|escrowPayway}}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{billInfo.payTime}}</el-descriptions-item>
        <el-descriptions-item label="支付金额">{{ billInfo.payAmount}}元</el-descriptions-item>
        <el-descriptions-item label="操作人">{{billInfo.operator}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{billInfo.remark}}</el-descriptions-item>
        <el-descriptions-item label="支付凭证">
          <template v-for="item in billInfo.urlList">
            <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
                      fit="contain"></el-image>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-else>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="车牌号">{{billInfo.carNo}}</el-descriptions-item>
        <el-descriptions-item label="账单类型">{{ billInfo.billType|escrowBillType }}</el-descriptions-item>
        <el-descriptions-item label="关联时间">{{billInfo.startTime}}至{{billInfo.endTime}}</el-descriptions-item>
        <el-descriptions-item label="费用">{{billInfo.custodyFees}}元</el-descriptions-item>
        <el-descriptions-item label="账单时间">{{billInfo.billingTime}}</el-descriptions-item>
        <el-descriptions-item label="收款方式">{{billInfo.payWay|escrowPayway}}</el-descriptions-item>
        <el-descriptions-item label="收款时间">{{billInfo.payTime}}</el-descriptions-item>
        <el-descriptions-item label="收款金额">{{billInfo.payAmount}}元</el-descriptions-item>
        <el-descriptions-item label="操作人">{{billInfo.operator}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{billInfo.remark}}</el-descriptions-item>
        <el-descriptions-item label="收款凭证">
          <template v-for="item in billInfo.urlList">
            <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
                      fit="contain"></el-image>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import {escrowBillType, escrowPayway} from "@/utils/filters";
import * as escrowApi from "@/api/bills/escrow";
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      dialogVisible:false,
      type:2,//2.付款明细 4.收款明细
      billInfo:{}
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 方法集合
  methods: {
    escrowBillType,
    escrowPayway,
    show(type, item){
      this.type = type;
      this.dialogVisible = true;
      escrowApi.expenseDetails(item.itemId).then(res=>{
        this.billInfo = res.data;
      })
    },
    close(){
      this.dialogVisible = false;
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
